import React from 'react';
import _ from 'lodash';
import PropTypes from 'prop-types';
import FingerItem from '@components/finger-item';
import './index.less';
import { List as VList, AutoSizer } from 'react-virtualized';

const DetectResult = props => {
  let { items, os, device, row, titleInfo = true } = props;
  let updatedElement = <span className="updated">[有更新]</span>;
  let isNewElement = <span className="is-new">[新增]</span>;
  // eslint-disable-next-line
  let itemRender = ({ index, style = {} }) => {
    let item = items[index];
    return (
      <div key={index} className="item" style={style}>
        <div className="item__left">
          {item.port}
          {_.get(item, 'finger_updated') && updatedElement}
          {_.get(item, 'is_new_port') && isNewElement}
        </div>
        <div className="item__right">
          <p className="expan-item">
            <span>
              {_.get(item, 'service_updated') && updatedElement}
              服务
            </span>
            <span>{_.get(item, 'service') || '-'}</span>
          </p>
          <p className="expan-item">
            <span>
              {(_.get(item, 'component_updated') || _.get(item, 'version_updated')) &&
                updatedElement}
              组件
            </span>
            <FingerItem
              rawType="component"
              name={item.component}
              fullName={`${item.component} ${item.version || ''}`}
            />
          </p>
          {_.get(item, 'banner') && (
            <div className="expan-item expan-item-banner">
              <span>响应体</span>
              <span className="banner">
                <em>{_.get(item, 'banner')}</em>
              </span>
            </div>
          )}
        </div>
      </div>
    );
  };
  return (
    <div className="c-detect-result">
      {titleInfo && (
        <div className="device-os">
          <div className="os">
            操作系统&nbsp;
            <FingerItem name={os} fullName={os} rawType="os" />
            {_.get(row, 'os_updated') && updatedElement}
          </div>
          <div className="device">
            设备类型 {device || '-'} {_.get(row, 'device_updated') && updatedElement}
          </div>
        </div>
      )}

      {items.length > 20 ? (
        <div className="port-items-wrapper" style={{ height: 300 }}>
          {
            <AutoSizer>
              {({ width, height }) => (
                <VList
                  width={width}
                  height={height}
                  overscanRowCount={10}
                  rowCount={items.length}
                  rowHeight={146}
                  rowRenderer={itemRender}
                />
              )}
            </AutoSizer>
          }
        </div>
      ) : items.length > 0 ? (
        <div className="port-items-wrapper" style={{ maxHeight: 300, overflowY: 'auto' }}>
          {items.map((v, index) => {
            return itemRender({ index });
          })}
        </div>
      ) : null}
    </div>
  );
};
/* eslint-disable  camelcase */
DetectResult.propTypes = {
  items: PropTypes.array,
  row: PropTypes.object,
  os: PropTypes.string,
  device: PropTypes.string,
  web_framwork: PropTypes.string,
  web_language: PropTypes.string,
  web_server: PropTypes.string,
  web_title: PropTypes.string,
  web_waf: PropTypes.string,
  titleInfo: PropTypes.boolean
};
/* eslint-enable */

export default DetectResult;
